<template>
  <view class="new-address">
    <u-top-tips ref="uTips"></u-top-tips>

    <u-popup
      v-model="show"
      mode="center"
      width="90%"
      min-height="750rpx"
      :closeable="true"
      border-radius="20"
      :mask-close-able="false"
    >
      <view class="title">{{ poupTitle }}</view>
      <view style="padding: 10px">
        <u-form :model="form" ref="newAddressForm">
          <u-form-item label="姓名" prop="name">
            <u-input v-model="form.name" placeholder="快件上收件人姓名" />
          </u-form-item>
          <u-form-item label="手机" prop="phone">
            <u-input
              v-model="form.phone"
              type="number"
              placeholder="快件上收件人电话"
            />
          </u-form-item>
          <u-form-item
            label="学校/楼栋"
            label-width="200"
            prop="schoolBuildRoom"
          >
            <u-input
              v-model="form.schoolBuildRoom"
              type="select"
              @click="openChooseRoom"
              placeholder="请选择学校/楼栋"
            />
          </u-form-item>

          <u-form-item label="宿舍号" label-width="200" prop="room">
            <u-input v-model="form.room" type="number" placeholder="寝室号" />
          </u-form-item>

          <u-form-item label="设为默认地址" label-width="250">
            <u-switch slot="right" v-model="form.defaultAddress"></u-switch>
          </u-form-item>
        </u-form>
        <view style="margin-top: 40px">
          <u-button
            type="success"
            shape="circle"
            @click="addNewAddress"
            v-if="form.isEdit"
            >修改</u-button
          >
          <u-button type="success" shape="circle" @click="addNewAddress" v-else
            >添加</u-button
          >
        </view>
      </view>
    </u-popup>

    <!-- 学校/楼栋/宿舍 弹窗选择 -->
    <u-select
      v-model="infoSshow"
      mode="mutil-column-auto"
      :list="list"
      @confirm="confirm"
      title="学校/楼栋"
    ></u-select>
  </view>
</template>

<script>
import { AddNewAddressRules } from "@/common/js/formRules";

export default {
  data() {
    return {
      show: false, //弹窗开关
      infoSshow: false, //学校/楼栋/宿舍 弹窗选择
      poupTitle: "新建收货地址",
      form: {
        addresId: "",
        name: "",
        phone: "",
        room: "",
        schoolBuildRoom: "", //仅存拼接好以后的字符串
        schoolBuildRoomList: "", //存获取到的list  list[0]学校 list[1]楼栋 list[2]寝室
        defaultAddress: false,
        isEdit: false, //当弹窗是作为编辑功能时候
      },
      list: [],
    };
  },
  mounted() {
    // 给表单 添加规则
    this.$refs.newAddressForm.setRules(AddNewAddressRules);
    //判断是否是编辑 还是新增
    console.log(this.form.isEdit);
  },
  methods: {
    //   打开弹窗 学校/楼栋/宿舍 弹窗选择
    openChooseRoom() {
      this.infoSshow = true;
    },
    // 点击确认 学校/楼栋/宿舍 弹窗选择
    confirm(e) {
      console.log(e);
      this.form.schoolBuildRoomList = e;
      //   选择之前 先清空之前的选择 防止数据错乱
      this.form.schoolBuildRoom = "";
      for (let index = 0; index < e.length; index++) {
        if (index === 0) {
          this.form.schoolBuildRoom += e[index].label;
        } else {
          this.form.schoolBuildRoom += "/" + e[index].label;
        }
      }
    },
    addNewAddress() {
      this.$refs.newAddressForm.validate((valid) => {
        if (valid) {
          this.submitNewAddress();
        } else {
          console.log("验证失败");
        }
      });
    },
    // 提交新的 收货地址
    submitNewAddress() {
      //这里需要判断是 编辑 还是新增功能  根据form.isEdit的值 拿给后端判断
      //新增的时候没有addressId  isEdit = false 编辑的时候addressId有值 isEdit = true
      this.$u.api.addAddressApi(this.form).then((res) => {
        // 父组件重新获取数据
        this.$parent.getAllAddressList();
        this.show = false;
        this.$refs.uTips.show({
          title: this.form.isEdit == true ? "修改成功" : "添加成功",
          type: "success",
          duration: "2000",
        });
      });
    },
  },
};
</script>

<style scoped lang ='less' >
.new-address {
  .title {
    padding: 10px;
    text-align: center;
    font-size: 16px;
  }
}
</style>
